import React from 'react';
import wheelImg from "../imgs/wheel.svg";

import moduleNavImg from "../imgs/ksh33.png";
import conBot_1 from "../imgs/ksh42.png";
import conBot_2 from "../imgs/ksh43.png";
import conBot_4 from "../imgs/ksh44.png";
import conBot_3 from "../imgs/ksh45.png";
import borderImg from "../imgs/ksh34.png";
import hoistImg from "../imgs/hoist.png";
import f from 'compose-function';

class Elec extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            m_elec: [2.132, 3.122, 2.564],
            s_elec: [2.132, 3.122],
            flag: this.props.flag
        }
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log("elec", this.state.flag)
        if (this.state.flag == nextProps.flag)
            return false;
        this.setState({
            flag: nextProps.flag
        });
        this.render();
        return true;
    }
    render() {
        if (this.state.flag) {
            return (
                <div className="my-lay-all three-data">
                    <div>
                        <img src={borderImg} alt="" className="i-img-1" />
                        <img src={borderImg} alt="" className="i-img-2" />
                        <img src={borderImg} alt="" className="i-img-3" />
                        <img src={borderImg} alt="" className="i-img-4" />
                        <nav>励磁电流</nav>
                        <div>
                            <div className="d-i-v">{this.state.m_elec[0]}</div>
                            <div className="d-i-u">mA</div>
                        </div>
                    </div>
                    <div>
                        <img src={borderImg} alt="" className="i-img-1" />
                        <img src={borderImg} alt="" className="i-img-2" />
                        <img src={borderImg} alt="" className="i-img-3" />
                        <img src={borderImg} alt="" className="i-img-4" />
                        <nav>转矩电流1</nav>
                        <div>
                            <div className="d-i-v">{this.state.m_elec[1]}</div>
                            <div className="d-i-u">mA</div>
                        </div>
                    </div>
                    <div>
                        <img src={borderImg} alt="" className="i-img-1" />
                        <img src={borderImg} alt="" className="i-img-2" />
                        <img src={borderImg} alt="" className="i-img-3" />
                        <img src={borderImg} alt="" className="i-img-4" />
                        <nav>转矩电流2</nav>
                        <div>
                            <div className="d-i-v">{this.state.m_elec[2]}</div>
                            <div className="d-i-u">mA</div>
                        </div>
                    </div>
                </div>
            );
        } else {
            return (
                <div className="my-lay-all two-data">
                    <div className="data-item">
                        <img src={borderImg} alt="" className="i-img-1" />
                        <img src={borderImg} alt="" className="i-img-2" />
                        <img src={borderImg} alt="" className="i-img-3" />
                        <img src={borderImg} alt="" className="i-img-4" />
                        <nav>励磁电流</nav>
                        <div>
                            <div className="d-i-v">{this.state.s_elec[0]}</div>
                            <div className="d-i-u">mA</div>
                        </div>
                    </div>
                    <div className="data-item">
                        <img src={borderImg} alt="" className="i-img-1" />
                        <img src={borderImg} alt="" className="i-img-2" />
                        <img src={borderImg} alt="" className="i-img-3" />
                        <img src={borderImg} alt="" className="i-img-4" />
                        <nav className="item-sub-nav">电枢电流</nav>
                        <div className="item-two-data">
                            <div className="d-i-v">{this.state.s_elec[1]}</div>
                            <div className="d-i-u">mA</div>
                        </div>
                    </div>
                </div>
            );
        }
    }
}

class Other extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pressure: 12.1,
            tickCount: 10,
            elec: 910,
        }
    }
    render() {
        return (
            <div className="my-lay-all three-data">
                <div>
                    <nav>液压站压力</nav>
                    <div>{this.state.pressure + "MPa"}</div>
                </div>
                <div>
                    <nav>勾数</nav>
                    <div>{this.state.tickCount + "勾"}</div>
                </div>
                <div>
                    <nav>电度</nav>
                    <div>{this.state.elec + "kW·h"}</div>
                </div>
            </div>
        );
    }
}

class Power extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            power: 725,
            powerFactor: 0.245,
        }
    }
    render() {
        return (
            <div className="my-lay-all two-data">
                <div className="data-item">
                    <img src={borderImg} alt="" className="i-img-1" />
                    <img src={borderImg} alt="" className="i-img-2" />
                    <img src={borderImg} alt="" className="i-img-3" />
                    <img src={borderImg} alt="" className="i-img-4" />
                    <nav>功率</nav>
                    <div>
                        <div className="d-i-v">{this.state.power}</div>
                        <div className="d-i-u">kW·h</div>
                    </div>
                </div>
                <div className="data-item">
                    <img src={borderImg} alt="" className="i-img-1" />
                    <img src={borderImg} alt="" className="i-img-2" />
                    <img src={borderImg} alt="" className="i-img-3" />
                    <img src={borderImg} alt="" className="i-img-4" />
                    <nav className="item-sub-nav">功率因数</nav>
                    <div className="item-two-data">
                        <div className="d-i-v">{this.state.powerFactor}</div>
                    </div>
                </div>
            </div>
        );
    }
}

class Location extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            v: 1.42,
            h: 312.4
        }
    }
    render() {
        return (
            <div className="my-lay-all two-data">
                <div className="data-item">
                    <img src={borderImg} alt="" className="i-img-1" />
                    <img src={borderImg} alt="" className="i-img-2" />
                    <img src={borderImg} alt="" className="i-img-3" />
                    <img src={borderImg} alt="" className="i-img-4" />
                    <nav>速度</nav>
                    <div>
                        <div className="d-i-v">{this.state.v}</div>
                        <div className="d-i-u">m/s</div>
                    </div>
                </div>
                <div className="data-item">
                    <img src={borderImg} alt="" className="i-img-1" />
                    <img src={borderImg} alt="" className="i-img-2" />
                    <img src={borderImg} alt="" className="i-img-3" />
                    <img src={borderImg} alt="" className="i-img-4" />
                    <nav className="item-sub-nav">高度</nav>
                    <div className="item-two-data">
                        <div className="d-i-v">{this.state.h}</div>
                        <div className="d-i-u">m</div>
                    </div>
                </div>
            </div>
        );
    }
}

class Temperature extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tem: new Array(4).fill(13.5),
        }
    }
    componentDidMount() {
        this.timerID = setInterval(() => {
            if (this.props.flag === "true") {
                this.setState({
                    //tem:this.state.tem+1,
                });
            }
        }, 1000);
    }
    componentWillUnmount() {
        clearInterval(this.timerID);
    }
    render() {
        return (
            <div className="my-lay-all four-data">
                <div>
                    <img src={borderImg} alt="" className="i-img-1" />
                    <img src={borderImg} alt="" className="i-img-2" />
                    <img src={borderImg} alt="" className="i-img-3" />
                    <img src={borderImg} alt="" className="i-img-4" />
                    <nav>电机</nav>
                    <div>
                        <div className="d-i-v">{this.state.tem[0]}</div>
                        <div className="d-i-u">°C</div>
                    </div>
                </div>
                <div>
                    <img src={borderImg} alt="" className="i-img-1" />
                    <img src={borderImg} alt="" className="i-img-2" />
                    <img src={borderImg} alt="" className="i-img-3" />
                    <img src={borderImg} alt="" className="i-img-4" />
                    <nav>卷筒左轴承座</nav>
                    <div>
                        <div className="d-i-v">{this.state.tem[1]}</div>
                        <div className="d-i-u">°C</div>
                    </div>
                </div>
                <div>
                    <img src={borderImg} alt="" className="i-img-1" />
                    <img src={borderImg} alt="" className="i-img-2" />
                    <img src={borderImg} alt="" className="i-img-3" />
                    <img src={borderImg} alt="" className="i-img-4" />
                    <nav>卷筒右轴承座</nav>
                    <div>
                        <div className="d-i-v">{this.state.tem[2]}</div>
                        <div className="d-i-u">°C</div>
                    </div>
                </div>
                <div>
                    <img src={borderImg} alt="" className="i-img-1" />
                    <img src={borderImg} alt="" className="i-img-2" />
                    <img src={borderImg} alt="" className="i-img-3" />
                    <img src={borderImg} alt="" className="i-img-4" />
                    <nav>导向轮</nav>
                    <div>
                        <div className="d-i-v">{this.state.tem[3]}</div>
                        <div className="d-i-u">°C</div>
                    </div>
                </div>
            </div>
        );
    }
}

class Vibration extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            vib: [0.21, 0.24, 0.19, 0.23],
        }
    }
    componentDidMount() {
        this.timerID = setInterval(() => {
            if (this.props.flag === "true") {
                this.setState({
                    //tem:this.state.tem+1,
                });
            }
        }, 1000);
    }
    componentWillUnmount() {
        clearInterval(this.timerID);
    }
    render() {
        return (
            <div className="my-lay-all four-data">
                <div>
                    <img src={borderImg} alt="" className="i-img-1" />
                    <img src={borderImg} alt="" className="i-img-2" />
                    <img src={borderImg} alt="" className="i-img-3" />
                    <img src={borderImg} alt="" className="i-img-4" />
                    <nav>电机</nav>
                    <div>
                        <div className="d-i-v">{this.state.vib[0]}</div>
                        <div className="d-i-u">μm</div>
                    </div>
                </div>
                <div>
                    <img src={borderImg} alt="" className="i-img-1" />
                    <img src={borderImg} alt="" className="i-img-2" />
                    <img src={borderImg} alt="" className="i-img-3" />
                    <img src={borderImg} alt="" className="i-img-4" />
                    <nav>卷筒左轴承座</nav>
                    <div>
                        <div className="d-i-v">{this.state.vib[1]}</div>
                        <div className="d-i-u">μm</div>
                    </div>
                </div>
                <div>
                    <img src={borderImg} alt="" className="i-img-1" />
                    <img src={borderImg} alt="" className="i-img-2" />
                    <img src={borderImg} alt="" className="i-img-3" />
                    <img src={borderImg} alt="" className="i-img-4" />
                    <nav>卷筒右轴承座</nav>
                    <div>
                        <div className="d-i-v">{this.state.vib[2]}</div>
                        <div className="d-i-u">μm</div>
                    </div>
                </div>
                <div>
                    <img src={borderImg} alt="" className="i-img-1" />
                    <img src={borderImg} alt="" className="i-img-2" />
                    <img src={borderImg} alt="" className="i-img-3" />
                    <img src={borderImg} alt="" className="i-img-4" />
                    <nav>导向轮</nav>
                    <div>
                        <div className="d-i-v">{this.state.vib[3]}</div>
                        <div className="d-i-u">μm</div>
                    </div>
                </div>
            </div>
        );
    }
}

class Data extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props.flag);
        this.state = {
            title: this.props.flag ? "主井提升机模块" : "副井提升机模块",
        }
    }
    render() {
        return (
            <div className="data my-page">
                <nav className="data-nav">{this.state.title}</nav>
                <div className="data-main">
                    <div className="my-module">
                        <nav>温度</nav>
                        <div>
                            <Temperature flag={this.props.flag} />
                        </div>
                    </div>
                    <div className="my-module">
                        <nav>罐笼状态</nav>
                        <div>
                            <Location flag={this.props.flag} />
                        </div>
                    </div>
                    <div className="my-module">
                        <nav>振动</nav>
                        <div>
                            <Vibration flag={this.props.flag} />
                        </div>
                    </div>
                    <div className="my-module">
                        <nav>电流</nav>
                        <div>
                            <Elec flag={this.props.flag} />
                        </div>
                    </div>
                    <div className="my-module">
                        <nav>其他</nav>
                        <div>
                            <Other flag={this.props.flag} />
                        </div>
                    </div>
                    <div className="my-module">
                        <nav>功率</nav>
                        <div>
                            <Power flag={this.props.flag} />
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

class Cage extends React.Component {
    render() {
        return (
            <div className={this.props.class}>
                <div className="sub-cage" />
                <div className="sub-cage" />
            </div>
        );
    }
}

class Hoist extends React.Component {
    render() {
        return (
            <div className="hoist">
                <div className="wheel">
                    <img src={wheelImg} className="wheel-img" alt=""></img>
                </div>
                <div className="l-rope" />
                <div className="r-rope" />
                <Cage class="l-cage" />
                <Cage class="r-cage" />
            </div>
        );
    }
}

class Well extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props.flag);
    }
    render() {
        return (
            <div className="well">
                <Data flag={this.props.flag} />
                <Hoist flag={this.props.flag} />
            </div>
        );
    }
}

class Home extends React.Component {
    constructor(props) {
        super(props);
        let flag = null;
        let propsState = this.props.location.state;
        console.log(propsState);
        if (typeof (propsState) === "undefined")
            flag = true;
        else
            flag = this.props.location.state.flag;
        this.state = {
            flag: flag,
            rope_f_length: 21,
            rope_total_length: 22,
            rope_top: 9.375,
        };
    }

    changeHeight(ropes_f, cage_f, ropes_b, cage_b, flag) {
        let delta = 0.1;
        let rope_f_length = this.state.rope_f_length;

        rope_f_length = flag ? (rope_f_length - delta) : (rope_f_length + delta);

        this.setState({
            rope_f_length: rope_f_length
        });

        if (rope_f_length <= 1) {
            flag = false;
        }
        if (rope_f_length >= 21) {
            flag = true;
        }
        const state = this.state;

        ropes_f.style.height = rope_f_length + "rem";
        cage_f.style.top = state.rope_top + rope_f_length + "rem";

        let rope_b_length = state.rope_total_length - state.rope_f_length;

        ropes_b.style.height = rope_b_length + "rem";
        cage_b.style.top = state.rope_top + rope_b_length + "rem";

        return flag;
    }


    componentDidMount() {
        let doc = document;
        let ropes_f = doc.getElementById("ropes-f");
        let cage_f = doc.getElementById("f-cage");
        let ropes_b = doc.getElementById("ropes-b");
        let cage_b = doc.getElementById("b-cage");
        let moveFlag = true;
        this.timerID = setInterval(() => {
            moveFlag = this.changeHeight(ropes_f, cage_f, ropes_b, cage_b, moveFlag);
        }, 100);
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    shouldComponentUpdate(nextProps) {
        let propsState = this.props.location.state;
        if (typeof (propsState) === "undefined")
            return false;
        else {
            if (this.state.flag === propsState.flag) {
                return false;
            } else {
                this.setState({
                    flag: propsState.flag
                });
                return true;
            }
        }
    }
    render() {
        return (
            <div className="my-lay-all" id="home-main">
                {/* <Well flag={true}/> */}
                <div className="home-data">
                    <div className="my-module">
                        <nav>
                            <div className="curve-link">罐笼状态</div>
                            <img className="module-nav-img" src={moduleNavImg} alt=""></img>
                        </nav>
                        <Location />
                    </div>
                    <div className="my-module">
                        <nav>
                            <div className="curve-link">振动</div>
                            <img className="module-nav-img" src={moduleNavImg} alt=""></img>
                        </nav>
                        <Vibration />
                    </div>
                    <div className="my-module">
                        <nav>
                            <div className="curve-link">温度</div>
                            <img className="module-nav-img" src={moduleNavImg} alt=""></img>
                        </nav>
                        <Temperature />
                    </div>
                </div>
                <div className="home-hoist">
                    <img src={conBot_1} alt="" className="conbot-1" />
                    <img src={conBot_2} alt="" className="conbot-2" />
                    <img src={conBot_3} alt="" className="conbot-3" />
                    <img src={conBot_4} alt="" className="conbot-4" />
                    <img src={hoistImg} alt="" className="hoist-img" />
                    <div id="ropes-f" className="ropes-f">
                        <div></div>
                        <div></div>
                        <div className="last-block"></div>
                    </div>
                    <div id="ropes-b" className="ropes-b">
                        <div></div>
                        <div></div>
                        <div className="last-block"></div>
                    </div>
                    <div id="f-cage" className="f-cage">
                        <div className="sub-cage" />
                        <div className="sub-cage" />
                    </div>
                    <div id="b-cage" className="b-cage">
                        <div className="sub-cage" />
                        <div className="sub-cage" />
                    </div>
                    <div className="home-lifter-state">
                        <div className="route-btn hls-item">
                            <div className="r-link">提煤</div>
                        </div>
                        <div className="route-btn hls-item">
                            <div className="r-link">检修</div>
                        </div>
                        <div className="route-btn hls-item">
                            <div className="r-link">紧急开车</div>
                        </div>
                        <div className="route-btn hls-item">
                            <div className="r-link">休止</div>
                        </div>
                        <div className="route-btn hls-item">
                            <div className="r-link">故障</div>
                        </div>
                        <div className="route-btn hls-item" style={{backgroundColor:"#345f92"}}>
                            <div className="r-link">人为停止</div>
                        </div>
                        <div className="route-btn hls-item">
                            <div className="r-link">验绳</div>
                        </div>

                    </div>
                </div>
                <div className="home-data">
                    <div className="my-module">
                        <nav>
                            <div className="curve-link">电流</div>
                            <img className="module-nav-img" src={moduleNavImg} alt=""></img>
                        </nav>
                        <Elec flag={this.state.flag} />
                    </div>
                    <div className="my-module">
                        <nav>
                            <div className="curve-link">功率</div>
                            <img className="module-nav-img" src={moduleNavImg} alt=""></img>
                        </nav>
                        <Power />
                    </div>
                    <div className="my-module">
                        <nav>
                            <div className="curve-link">故障</div>
                            <img className="module-nav-img" src={moduleNavImg} alt=""></img>
                        </nav>
                        <div></div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Home;